<template>
  <div>
    <el-row class="title" justify="end" type="flex">
      <el-col :span="3">
        <i @click="handleCollapseClick" class="el-icon-s-operation ft-25"></i>
      </el-col>
      <el-col :offset="15" :span="6" class="tr">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{ getUsername }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu>
            <el-dropdown-item command="modify">
              修改密码
            </el-dropdown-item>
            <el-dropdown-item command="exit">
              退出
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <section>
      <commdialog :diglog="diglog" @bindSend="propDigbool"></commdialog>
    </section>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { ModifyForm } from "@/interface/interface";
import Commdialog from "@/components/commdialog.vue";
import Cookie from "js-cookie";
import { State, Mutation } from "vuex-class";

@Component({
  components: { Commdialog }
})
export default class MyHeader extends Vue {
  @Mutation("handleCollapse") handleCollapse: any;
  protected name!: "MyHeader";
  protected diglog: boolean = false;
  protected iscollapse: boolean = false;

  get getUsername() {
    return Cookie.get("username");
  }

  protected handleCommand(item: string) {
    item === "modify" ? this.modifyHandle() : this.exitHandle();
  }

  protected modifyHandle() {
    this.diglog = true;
  }

  protected exitHandle() {
    this.$router.push({ name: "Login" });
    Cookie.remove("username");
    Cookie.remove("access-token");
  }

  protected propDigbool(bool: boolean) {
    this.diglog = bool;
  }

  protected handleCollapseClick() {
    this.iscollapse = !this.iscollapse;
    this.handleCollapse({ value: this.iscollapse });
    //this.$store.comit('handleCollapse',{value:this.iscollapse})
  }
}
</script>

<style lang="scss" scoped>
.title {
  font: 16px/60px "Microsoft YaHei";
  padding: 0 20px;
}
</style>
